<template>
  <div class="sidebar">
    <div class="sidebar-content">
      <div v-for="(domain, index) in domains" :key="index" class="domain-item" @click="selectDomain(index)">
        <span>{{ domain.name }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const domains = ref([
  { name: '运维' },
  { name: '开发' },
  { name: '绘画' },
  { name: '音乐' },
  { name: '人工智能' },
  { name: '产品经理' },
]);

const emit = defineEmits(['select-domain']);

const selectDomain = (index: number) => {
  emit('select-domain', index);
};
</script>

<style scoped>
.sidebar {
  width: 100px;
  height: 100vh;
  padding-top: 60px;
  background-color: #f5f5f5;
  border-right: 1px solid #e0e0e0;
}

.sidebar-content {
  padding: 0;
  height: 100%;
  text-align: right;
  overflow-y: auto;
}

.domain-item {
  padding: 15px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.domain-item:hover {
  background-color: #e0e0e0;
}

/* 自定义滚动条样式 */
.sidebar-content::-webkit-scrollbar {
  width: 6px;
}

.sidebar-content::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.sidebar-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style> 